<template>
  <div
    ref="main"
    id="main"
    style="width: 100%; height: 100%; margin: auto"
  ></div>
</template>

<script>
export default {
  props: {
    dataList: {
      type: Object,
    },
  },
  mounted() {
    this.drawChart();
  },
  methods: {
    drawChart() {
      // 基于准备好的dom，初始化echarts实例  这个和上面的main对应
      // let myChart = this.$echarts.init(document.getElementById("main"));
      let myChart = this.$echarts.init(this.$refs.main);
      //职称结构取数
      var getname = ["大型企业", "中型企业", "小微企业"];
      var getvalue = [2.79, 8.62, 57.1];

      // var getvalue = [this.dataList.dxRatio, this.dataList.zxRatio, this.dataList.xwRatio];

      var data = [];
      for (var i = 0; i < getname.length; i++) {
        data.push({
          name: getname[i],
          value: getvalue[i],
        });
      }

      // 指定图表的配置项和数据
      let option = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        legend: {
        //   icon: "rect",
          itemGap: 20,
          itemHeight: 12,
          itemWidth: 12,
          textStyle: {
            fontSize: 12, //字体大小
            color: "#38BBEE", //字体颜色
          },
        },
        grid: {
          top: "22%",
          left: "3%",
          right: "4%",
          bottom: "7%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            data: ["2018", "2019", "2020", "2021", "2022"],
            // data: that.data.map((v) => v.融资城市),
            axisLabel: {
              textStyle: {
                color: "#38BBEE",
                //fontSize: 18
              },
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            // name: '总和',
            min: 0,
            // max: 200,
            // interval: (200 - 0) / 5,
            color: "#38BBEE",
            axisLabel: {
              textStyle: {
                color: "#38BBEE",
                //fontSize: 18
              },
              formatter: "{value} ",
            },
          },
          {
            type: "value",
            // name: '增长率',
            min: 0,
            // max: 200,
            // interval: (200 - 0) / 5,
            axisLabel: {
              textStyle: {
                color: "#38BBEE",
                //fontSize: 18
              },
              formatter: "{value}",
            },
            axisLine: {
              lineStyle: {
                color: "#666",
              },
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: "#666",
              },
            },
          },
        ],
        series: [
           {
            name: "集成电路产值年增速",
            type: "line",
            symbol: "circle", //标记的图形为实心圆
            symbolSize: 6, //标记的大小
            barWidth: 10,
            data: [240, 272, 251, 254, 250, 260, 200],
            // data: that.data.map((v) => v.IPO辅导企业),
            itemStyle: {
              normal: {
                color: "#00A9FF",
              },
            },
          },
          {
            name: "人工智能产值年增速",
            type: "line",
            symbol: "circle", //标记的图形为实心圆
            symbolSize: 6, //标记的大小
            barWidth: 10,
            data: [220, 232, 251, 234, 230, 230, 210],
            // data: that.data.map((v) => v.近3个月内有融资企业数量),
            itemStyle: {
              normal: {
                color: "#C490BF",
              },
            },
          },
         
          {
            name: "工业软件产值年增速",
            // data: that.data.map((v) => v.A股上市企业),
            type: "line",
            symbol: "circle", //标记的图形为实心圆
            symbolSize: 6, //标记的大小
             barWidth: 10,
            data: [230, 252, 241, 214, 260, 240, 210],

            lineStyle: {
              normal: {
                color: "#F2C87B",
              },
            },
          },
          {
            type: "bar",
            name: "集成电路生产总值",
            barWidth: 10,
            data: [20, 98, 45, 24, 77, 69, 55],
            itemStyle: {
              normal: {
                color: {
                  type: "linear",
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: "rgba(0,122,239, 1)", // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "rgba(0,122,239, 0)", // 100% 处的颜色
                    },
                  ],
                  globalCoord: false, // 缺省为 false
                }, //渐变颜色
              },
            },
          },
          {
            type: "bar",
            barWidth: 10,
            name: "人工智能生产总值",
            data: [120, 178, 156, 124, 97, 75, 90],
            itemStyle: {
              normal: {
                color: {
                  type: "linear",
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: "rgba(137,47,233, 1)", // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "rgba(137,47,233, 0)", // 100% 处的颜色
                    },
                  ],
                  globalCoord: false, // 缺省为 false
                }, //渐变颜色
              },
            },
          }, {
            type: "bar",
            barWidth: 10,
            name: "工业软件生产总值",
            data: [120, 38, 46, 104, 87, 95, 55],
            itemStyle: {
              normal: {
                color: {
                  type: "linear",
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: "rgba(210,118,98, 1)", // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "rgba(210,118,98, 0)", // 100% 处的颜色
                    },
                  ],
                  globalCoord: false, // 缺省为 false
                }, //渐变颜色
              },
            },
          },
        ],
      };
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
      var currentIndex = -1;

      //  let myChart = echarts.getInstanceByDom(document.getElementById("chart-panel"))
      var dataLen = option.series[0].data.length;
      var timer = 0;
      setInterval(() => {
        //  计时器增加
        timer++;
        // if (timer == 5) {
        //   for (let index in arr) {
        //     arr[index].value = (Math.random() * 50 + 100).toFixed(0);
        //   }
        //   myChart.setOption({
        //     series: [
        //       {
        //         data: arr
        //       }
        //     ]
        //   });
        //   timer = 1;
        // }
        // 取消之前高亮的图形
        myChart.dispatchAction({
          type: "downplay",
          seriesIndex: 0,
          dataIndex: currentIndex,
        });
        currentIndex = (currentIndex + 1) % dataLen;
        // 高亮当前图形
        myChart.dispatchAction({
          type: "highlight",
          seriesIndex: 0,
          dataIndex: currentIndex,
        });
        // 显示 tooltip
        myChart.dispatchAction({
          type: "showTip",
          seriesIndex: 0,
          dataIndex: currentIndex,
        });
      }, 2000000);
    },
  },
};
</script>

<style></style>
